<template>
  <div class="user-nav-box-area flx-row">
    <div
      class="flx-col list-area-item"
      v-for="(item, index) in navList"
      :key="index"
      :class="'list-area-item-' + (index + 2)"
    >
      <!-- 非管理中心 -->
      <template v-if="!item.isUser">
        <div class="item-title flx-row-s-c">
          <span>{{ item.name }}</span>
          <i class="down-icon"></i>
        </div>
        <template v-for="(innerItem, innerIndex) in item.list">
          <div
            class="list-item"
            :key="innerIndex"
            @click.stop="toPage(innerItem)"
          >
            {{ innerItem.name }}
          </div>
        </template>
      </template>
      <!-- 管理中心 -->
      <template v-if="item.isUser && showUser">
        <div class="item-title flx-row-s-c">
          <span>{{ item.name }}</span>
          <i class="down-icon"></i>
        </div>
        <div class="other-area flx-row-s-s">
          <div
            class="inner-item"
            v-for="(innerItem, innerIndex) in item.children"
            :key="innerIndex"
            :class="[
              innerIndex != 3 && innerIndex != 7 ? 'm-right' : '',
              'inner-item-' + innerIndex,
            ]"
          >
            <div class="inner-title">{{ innerItem.name }}</div>
            <div class="inner-list-area flx-col-s-s">
              <template v-for="(e, eIndex) in innerItem.list">
                <div class="list-item" :key="eIndex" @click.stop="toPage(e)">
                  {{ e.name }}
                </div>
              </template>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { changelocation } from "@/utils/location.js";
export default {
  name: "VipUsernavbox",
  data() {
    return {
      navList: [
        {
          name: "域名预订",
          list: [
            {
              name: "预订域名",
              to: "/booking",
              other: true,
            },
            {
              name: "批量预订",
              to: "/batchbooking",
              other: true,
            },
            {
              name: "我的预订",
              to: "/user/mybookings",
            },
            {
              name: "预订提醒",
              to: "/user/reminder",
            },
          ],
        },
        {
          name: "域名竞价",
          list: [
            {
              name: "竞价域名",
              to: "/bidding",
              other: true, // 前台
            },
            {
              name: "我参与的竞价",
              to: "/user/mybiddings",
            },
            {
              name: "我的得标",

              to: "/user/mywinnings",
            },
          ],
        },
        {
          name: "一口价",
          list: [
            {
              name: "出售中的域名",
              to: "/buyoutprice",
              other: true,
            },
            {
              name: "我出售的域名",
              to: "/user/mybopdn",
            },
            {
              name: "出售域名",
              to: "/user/dnSell",
              other: true,
            },
          ],
        },
        // {
        //   name: "域名中介",
        //   list: [
        //     {
        //       name: "委托代购",
        //       to: "/dnpa?tab=1",
        //     },
        //     {
        //       name: "我的委托记录",
        //       to: "/user/purchasing",
        //     },
        //   ],
        // },
        {
          name: "新闻资讯",
          list: [
            {
              name: "官方公告",
              to: "/news?typeId=6&page=1&limit=10",
              other: true,
            },
            {
              name: "交易爆料",
              to: "/news?typeId=5&page=1&limit=10",
              other: true,
            },
            {
              name: "企业域名",
              to: "/news?typeId=4&page=1&limit=10",
              other: true,
            },
            {
              name: "媒体报道",
              to: "/news?typeId=18&page=1&limit=10",
              other: true,
            },
            {
              name: "域名百科",
              to: "/news?typeId=19&page=1&limit=10",
              other: true,
            },
          ],
        },
        {
          name: "管理中心",
          isUser: true,
          children: [
            {
              name: "域名管理",
              list: [
                {
                  name: "我的域名",
                  to: "/user/mydn",
                },
                {
                  name: "我的模板",
                  to: "/user/template",
                },
                {
                  name: "域名转出",
                  to: "/user/transferout",
                },
                {
                  name: "域名转入",
                  to: "/user/transferin",
                },
                {
                  name: "域名PUSH",
                  to: "/user/dnPush",
                },
                {
                  name: "域名订单",
                  to: "/user/myorder",
                },
                {
                  name: "批量解析",
                  to: "/user/batchanalysis",
                },
                {
                  name: "DNS设置",
                  to: "/user/batchDns",
                },
              ],
            },
            {
              name: "域名预订",
              list: [
                {
                  name: "预订域名",
                  to: "/booking",
                  other: true,
                },
                {
                  name: "批量预订",
                  to: "/batchbooking",
                  other: true,
                },
                {
                  name: "我的预订",
                  to: "/user/mybookings",
                },
                /*{
                  name: "预订提醒",
                  to: "/user/reminder",
                },*/
              ],
            },
            {
              name: "域名竞价",
              list: [
                {
                  name: "竞价域名",
                  to: "/bidding",
                  other: true,
                },
                {
                  name: "我的竞价",
                  to: "/user/mybiddings",
                },
                {
                  name: "我的得标",
                  to: "/user/mywinnings",
                },
              ],
            },
            {
              name: "我是卖家",
              list: [
                {
                  name: "出售域名",
                  to: "/user/dnSell",
                },
                {
                  name: "发布的一口价",
                  to: "/user/mybopdn",
                },
                /*{
                  name: "我的米店",
                  to: "/user/bopsetting",
                },*/
              ],
            },
            {
              name: "我是买家",
              list: [
                {
                  name: "购买的一口价",
                  to: "/user/successbop",
                },
                {
                  name: "我的委托",
                  to: "/user/entrust",
                },
              ],
            },
            // {
            //   name: "域名经纪",
            //   list: [
            //     {
            //       name: "申请域名经纪",
            //       to: "/dnpa?tab=0",
            //       other: true,
            //     },
            //     {
            //       name: "我的代购记录",
            //       to: "/user/purchasing",
            //     },
            //     {
            //       name: "我的出售记录",
            //       to: "/user/sell",
            //     },
            //   ],
            // },
            {
              name: "财务管理",
              list: [
                {
                  name: "账户信息",
                  to: "/user/account",
                },
                {
                  name: "折扣统计",
                  to: "/user/discount",
                },
                {
                  name: "资金明细",
                  to: "/user/capitaldetails",
                },
                {
                  name: "发票管理",
                  to: "/user/invoice",
                },
              ],
            },
            {
              name: "账户管理",
              list: [
                {
                  name: "个人资料",
                  to: "/user/personalData",
                },
                {
                  name: "安全中心",
                  to: "/user/security",
                },
                {
                  name: "我的认证",
                  to: "/user/certification",
                },
                /*{
                  name: "我的申请",
                  to: "/user/myapplication",
                },*/
                {
                  name: "通知设置",
                  to: "/user/noticeSetting",
                },
                {
                  name: "站内信",
                  to: "/user/mail",
                },
                {
                  name: "登录日志",
                  to: "/user/securitylog",
                },
              ],
            },
          ],
        },
      ],
    };
  },
  props: {
    other: {
      default: true,
    },
    colorType: {
      type: [String, Number],
      default: 0,
    },
    showUser: {
      // 是否显示用户中心
      type: Boolean,
      default: true,
    },
  },
  created() {},
  watch: {
    showUser: {
      deep: true,
      handler(newValue) {
        this.showUser = newValue;
      },
    },
  },
  mounted() {},
  methods: {
    toPage(item) {
      if (item.other) {
        // 前台
        window.location.href = changelocation(item.to);
      } else {
        // 用户中心
        if (item.to == this.$route.path) {
          this.$router.go(0);
        } else {
          window.location.href = item.to;
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.user-nav-box-area {
  width: 100%;
  padding: 0px 120px 0px 315px;
  background: #f5f5f5;
  .list-area-item {
    padding: 40px 16px 20px;
    margin-top: -5px;
    @include bg-setting(null, 18px, left top);

    &:hover {
      background: #fff;
    }
    .item-title {
      font-size: 14px;
      font-weight: 600;
      color: $mainColor;
      margin-bottom: 20px;
      line-height: 18px;
    }

    .down-icon {
      display: inline-block;
      @include size(18px, 18px);
      @include bg-setting3("down");
      transition: background-image 0.3s;
      margin-left: 10px;
    }

    .list-item {
      display: block;
      font-size: 14px;
      @include h-c(null, null, #000, $mainColor);
      margin: 6px 0;
      line-height: 2;
      font-weight: 400;
      cursor: pointer;
      min-width: 85px;
    }

    .other-area {
      width: 430px;
      flex-wrap: wrap;
      position: relative;

      .m-right {
        padding-right: 25px;
      }
      .min-w {
        min-width: 170px;
      }
      .inner-item {
        font-size: 14px;
        &:hover {
          background: #fff;
        }
        .inner-title {
          color: #000;
          font-weight: 600;
        }
        .inner-list-area {
          flex-wrap: wrap;
        }
      }
    }
  }

  // .inner-item-4 {
  //   margin-top: 10px;
  // }
  .inner-item-5 {
    margin-top: -160px;
    margin-left: -10px;
  }
  .inner-item-6 {
    margin-top: -160px;
  }
  .inner-item-7 {
    margin-top: -160px;
  }
}
</style>
